<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue"
import { useUserStore } from "@/stores/user"
import SysDialog from "@/components/SysDialog.vue"
import useDialog from "@/common/hooks/useDialog"
import useInstance from "@/common/hooks/useInstance.ts"

const userStore = useUserStore()
const { dialog, onOpen, onClose, onConform } = useDialog()
const { global } = useInstance()

const value = ref(new Date())
const interval = ref<number | null>(null)
const showLoading = ref(false)

onMounted(() => {
	interval.value = setInterval(() => {
		showLoading.value = !showLoading.value
	}, 3000)

	userStore.setUserInfo({
		userId: "12345678",
		username: "test",
		token: "12345678",
	})
	initDialog()
})

const initDialog = () => {
	// dialog.height = 120
	dialog.width = 580
	dialog.title = "弹窗提示"
}

const confirmDialog = async () => {
	const confirm = await global.$confirm("是否确认关闭弹窗?", "danger")
	if (confirm) {
		onConform()
	} else {
		// ...
	}
}

const showMessage = (type: string | null): void => {
	global.$message(`This is a ${type} type Message !`, type)
}

onUnmounted(() => {
	interval.value = null
})
</script>

<template>
	<div class="bg">
		<el-alert title="功能异常检测预警" description="检测到您使用了影响网页质量, 广告屏蔽, 绕过验证等功能性的浏览器插件, 为更好的为您提供服务, 请关闭此类插件。" show-icon type="warning" />
		<div
			class="text-3xl mb-[36px] cursor-pointer mt-12 flex justify-center select-none"
			v-loading="showLoading"
		>
			空白 Vue3 项目模板
		</div>
		<Eleme width="60" class="mx-auto text-[color:var(--el-color-primary)]" />
		<div class="mt-[42px] what flex justify-center">
			<div class="">
				<el-button @click="onOpen">打开弹窗</el-button>
				<el-button type="primary" @click="showMessage(null)">Primary</el-button>
				<el-button type="success" @click="showMessage('success')">Success</el-button>
				<el-button type="info" @click="showMessage('info')">Info</el-button>
				<el-button type="warning" @click="showMessage('warning')">Warning</el-button>
				<el-button type="danger" @click="showMessage('error')">Danger</el-button>
			</div>
		</div>
		<el-calendar v-model="value" />
		<SysDialog
			:visible="dialog.visible"
			:height="dialog.height"
			:width="dialog.width"
			:title="dialog.title"
			@onClose="onClose"
			@onConform="confirmDialog"
		>
			<template v-slot:content>
				<div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
					<div class="">插槽内容</div>
				</div>
			</template>
		</SysDialog>
	</div>
</template>

<style scoped lang="less">
.bg {
	font-size: 16px;

	.what {
		color: hotpink;
	}
}
</style>
